<template>

	<view class="page">
		<view class="header">
			<view class="common-box-down">
				<view class="data-item flex flex-y-center flex-x-between">
					<view>开始时间</view>
					<view class="flex" style="align-items: center;">
						<view>
							<picker mode="date" :value="searchForm.beginDate" :end="searchForm.endDate" @change="(e) =>bindDateChange('beginDate',e)">
								<view class="uni-input">{{searchForm.beginDate || '请选择日期'}}</view>
							</picker>
						</view>
						<view style="margin-left: 10rpx;width: 40rpx;height: 40rpx;">
							<svg t="1721379327130" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1487">
								<path d="M638.88124999 469.11875l43.828125 43.828125-44.175 44.175-323.090625 324.88125c-11.9625 12.0375-11.9625 31.734375 0 43.790625 11.9625 12.01875 31.584375 12.01875 43.528125 0l388.828125-390.946875c11.934375-12.0375 11.934375-31.771875 0-43.790625L358.97187499 100.08125c-11.94375-12.01875-31.575-12.01875-43.528125 0-11.9625 12.065625-11.9625 31.771875 0 43.790625l323.4375 325.246875z" fill="#000000" p-id="1488"></path>
							</svg>
						</view>
					</view>	
				</view>
			</view>
			<view class="common-box-down">
				<view class="data-item flex flex-y-center flex-x-between">
					<view>结束时间</view>
					<view class="flex" style="align-items: center;">
						<view>
							<picker mode="date" :value="searchForm.endDate" :start="searchForm.beginDate" @change="(e) =>bindDateChange('endDate',e)">
								<view class="uni-input">{{searchForm.endDate || '请选择日期'}}</view>
							</picker>
						</view>
						<view style="margin-left: 10rpx;width: 40rpx;height: 40rpx;">
							<svg t="1721379327130" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1487">
								<path d="M638.88124999 469.11875l43.828125 43.828125-44.175 44.175-323.090625 324.88125c-11.9625 12.0375-11.9625 31.734375 0 43.790625 11.9625 12.01875 31.584375 12.01875 43.528125 0l388.828125-390.946875c11.934375-12.0375 11.934375-31.771875 0-43.790625L358.97187499 100.08125c-11.94375-12.01875-31.575-12.01875-43.528125 0-11.9625 12.065625-11.9625 31.771875 0 43.790625l323.4375 325.246875z" fill="#000000" p-id="1488"></path>
							</svg>
						</view>
					</view>	
				</view>
			</view>
			
			<view class="header-ctr">
				<view class="button" @click="search">搜索</view><view class="button" @click="reset">重置</view>
			</view>
			
			<view style="margin-top: 20rpx;font-size: 10pt;">
				<view> 收入：<text style="color:green">+{{income}}</text></view>
				<view> 支出：<text style="color:red">-{{expend}}</text></view>
			</view>
		</view>
		
		<view class="body">
			<view class="user-status" v-for="item in dataList">
				<view style="display: flex;justify-content: space-between;">
					<view style="font-size: 11pt;font-weight: 600;">{{item.desc}}</view>
					<view v-if="item.type == 1" style="font-size: 11pt;color:green;font-weight: 600;">+{{ item.income }}</view>
					<view v-else style="font-size: 11pt;color:red;font-weight: 600;">-{{item.income}}</view>
				</view>
				
				<view style="display: flex;justify-content: space-between;">
					<view> 变动后：</view>
					<view>{{format(item.money)}}</view>
				</view>
				
				<view v-if="item.source_type != '{{%cash}}'" class="user-data" style="padding: 0 20rpx;">
					<view style="display: flex;align-items: center;">
						<view>
							<image v-if="item.order_user.avatar_url" :src="item.order_user.avatar_url" mode="aspectFill" class="acatar"></image>
							<image v-else src="/static/icon/default-avatar.png" mode="aspectFill" class="acatar"></image>
						</view>
						<view class="name-datetime">
							<view class="name">
								<view class="name-text">{{item.order_user.nickname}}</view>
								<!-- <view class="id" :style="{color: '#FF7104',border:'1px solid'+'#FF7104'}">ID:{{item.order_user.user_id}}</view> -->
							</view>
							<view class="tel">
								{{item.order_user.mobile}}
								<span class="iconfont icon-dianhua3"></span>
							</view>
						</view>
					</view>
				
					<view class="order-data">
						<view class="name-text">
							<view v-if="item.table == '{{%plugin_local_life_income}}'">再团消费</view>
							<view v-else>第三方平台</view>
						</view>
						<view>￥{{item.order_price || 0}}</view>
					</view>
				</view>
		

				
				<view style="text-align: right;font-size: 11pt;margin-top: 20rpx;">{{formatTimeToStr(item.created_at)}}</view>
			</view>
			
			
			<!--加载loadding-->
			<main-loadmore :visible="loadding" :index="3" type="red"></main-loadmore>
			<main-nomore :visible="!pullUpOn"></main-nomore>
		</view>
		
		
		
		<view class='cash-button' @click="openUrl('/plugins/local_life/cash/income')">
			<svg t="1725521911940" class="icon" viewBox="0 0 1332 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4319" width="32" height="32">
				<path d="M519.875831 751.761931 519.875831 664.886045 591.594298 593.114614 519.875831 521.343182 519.875831 434.468501 635.199559 549.47926 635.248912 549.43111 678.954085 593.114614 635.248912 636.802933 635.199559 636.752376ZM306.899187 557.191582l310.877528 0 0 71.848471-310.877528 0 0-71.848471ZM1262.322065 470.685244 1025.719735 470.685244c-37.678075 0-68.224028 30.553174-68.224028 68.243287l0 116.397459c0 37.690113 30.544748 68.243287 68.224028 68.243287l236.602329 0c37.678075 0 68.222824-30.553174 68.222824-68.243287l0-116.397459C1330.544888 501.238418 1300.00014 470.685244 1262.322065 470.685244zM1292.939037 628.766805c0 30.09094-24.386445 54.484609-54.46896 54.484609L1049.570519 683.251414c-30.082514 0-54.46896-24.393668-54.46896-54.484609l0-68.732003c0-30.09094 24.38765-54.484609 54.46896-54.484609l188.899558 0c30.082514 0 54.46896 24.393668 54.46896 54.484609L1292.939037 628.766805zM1037.206968 593.115817a29.991 30 0 1 0 72.202368 0 29.991 30 0 1 0-72.202368 0ZM957.486077 0 411.193102 175.632002 411.193102 220.019691 452.778497 220.019691 921.973519 69.173774 970.443069 220.019691 1028.181371 220.019691ZM507.860159 891.630998c-31.44153 0-56.9318-25.497492-56.9318-56.948652L450.928358 787.433382l-26.891416 0 0 62.851764c0 37.690113 30.545952 68.244491 68.22162 68.244491l130.736338 0 0-26.898639L507.860159 891.630998zM1205.597307 859.47445c0 65.120802-41.841791 112.469676-106.940926 112.469676l-621.875428 1.243458c-65.099134 0-112.39986-48.493625-112.39986-113.613222l-0.17093-131.672843-0.349083-0.350287-0.018056-44.406948-56.946245 0 0 119.233456 0 84.784999c0 75.379022 61.091905 136.485371 136.450463 136.485371l682.233055 0c75.358558 0 136.444444-61.106349 136.444444-136.485371L1262.024742 723.570483l-55.955571-0.001204L1205.597307 859.47445zM1125.580298 170.607617 443.347242 170.607617c-75.358558 0-136.450463 61.107553-136.450463 136.486575l0 204.016048 56.875224 0-0.073428-182.782182c0-65.120802 44.627231-108.591245 109.732384-108.591245l627.821874 0c65.099134 0 103.779921 46.442462 103.779921 111.563264l1.034008 139.383963 55.955571 0L1262.022335 307.095396C1262.023538 231.716373 1200.937653 170.607617 1125.580298 170.607617z" fill="#ffffff" p-id="4320"></path>
			</svg>
		</view>
	</view>
	
</template>

<script>
	import {formatTimeToStr} from "@/utils/date";
	export default{
		data(){
			return {
				loadding:false,
				pullUpOn:false,
				searchForm:{
					beginDate:'',
					endDate:'',
					page:1,
					page_size:20
				},
				page_count:0,
				dataList:[],
				income:0,
				expend:0,
			}
		},
		onLoad() {},
		onShow() {
			this.reset();
			this.getDataList();
		},
		methods:{
			search(){
				this.page_count = 0;
				this.searchForm.page = 1;
				this.dataList = [];
				this.getDataList();
			},
			reset(){
				this.searchForm = {
					beginDate:'',
					endDate:'',
					page:1,
					page_size:20
				}
				this.page_count = 0;
				this.dataList = [];
			},
			bindDateChange(key,e){
				this.$set(this.searchForm,key,e.detail.value);
				this.$forceUpdate();
			},
			async getDataList(){
				this.loadding = true;
				this.pullUpOn = true;
				let res = await this.$http.request({
					url: this.$api.localLife.incomeList,
					method: 'POST',
					data:this.searchForm
				});
				this.loadding = false;
				this.pullUpOn = false;
				if (res.code == 0) {
					this.income = parseFloat(res.data.income).toFixed(5);
					this.expend = parseFloat(res.data.expend).toFixed(5);
					this.searchForm.page = res.data.pagination.current_page;
					this.page_count = res.data.pagination.page_count;
					this.dataList.push(...res.data.list);
				}
			},
			openUrl(url) {
				uni.navigateTo({url})
			},
		},
	 	onReachBottom() {
			if (this.searchForm.page >= this.page_count) {
				return;
			}
			this.searchForm.page++;
			this.getDataList();
		},
		computed:{
			format(){
				return value =>{
					if(!value){
						value = 0;
					}
					return parseFloat(value).toFixed(5);
				}
			},
			formatTimeToStr(){
				return value => formatTimeToStr(value * 1000)
			}
		}
	}
</script>

<style lang="scss">
	.header{
		width: 100vw;
		background-color: #fff;
		padding:20rpx 20rpx;
		position: fixed;
		top: 0;
		box-shadow: 0 2rpx 20rpx rgba(0,0,0,0.5);
		z-index: 999;
	}
	.common-box-down{
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f2f2f2;
	}
	.header-ctr{
		padding: 20rpx 0 0;
		display: flex;
		justify-content: space-around;
	}
	.button{
		padding: 10rpx 80rpx;
		background-color: #ffbc00;
		color:#000000;
		border-radius: 20rpx;
	}
	.body{
		margin-top: 410rpx;
		padding: 0 20rpx;
	}
	
	.user-status {
		// display: flex;
		// justify-content: space-between;
		align-items: center;
		position: relative;
		padding: 20rpx;
		background-color: #fff;
		font-size: 10pt;
		margin-bottom: 8rpx;
	}
	
	.user-data{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
	}
	
	.acatar {
		width: 100rpx;
	.cash-button{
		position: fixed;
		right: 50rpx;
		top: 60vh;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #ffbc00;
		box-shadow: 2rpx 2rpx 5rpx 0 ;
		display: flex;
		justify-content: center;
		align-items: center;
	}		height: 100rpx;
		border-radius: 50%;
		margin-right: 16rpx;
	}
	.name-datetime {
		margin-left: 20rpx;
		.name {
			display: flex;
			line-height: 37rpx;
			
			.id {
				margin-left: 12rpx;
				color: #bc0100;
				padding: 0 10rpx;
				font-size: 9pt;
				transform: scale(0.8);
				line-height: 32rpx;
				border: 1rpx solid rgba(188, 1, 0, 1);
				border-radius: 14rpx;
			}
		}
		
		.tel,
		.datetime {
			font-size: 9pt;
			color: #808080;
		
			.iconfont {
				line-height: 16px;
				font-size: 10pt;
			}
		}
	}
	.order-data{
		width: 25vw;
		font-size: 9pt;
		text-align: right;
	}
	
	.cash-button{
		position: fixed;
		right: 50rpx;
		top: 60vh;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #ffbc00;
		box-shadow: 2rpx 2rpx 5rpx 0 ;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
